<template>
  <div id="trajectory">
    <!-- 附近历史轨迹 -->
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var map = new AMap.Map("trajectory", {
        mapStyle: "amap://styles/grey",
        features: ["bg", "road"],
        center: [116.40866, 39.87596],
        zoom: 11,
        pitch: 50,
        rotation: 45,
        viewMode: "3D"
      });

      var layer = new Loca.LinkLayer({
        map: map,
        fitView: false
      });

      $.get("//a.amap.com/Loca/static/mock/home_comp_line.json", function(
        home_comp_line
      ) {
        layer.setData(home_comp_line.slice(0, 500), {
          lnglat: "lnglat"
        });

        layer.setOptions({
          blendMode: "lighter",
          style: {
            // 曲率 [-1, 1] 区间
            curveness: function(data) {
              if (data.value.dis < 100) {
                return 0.07;
              } else if (data.value.dis < 300) {
                return 0.05;
              } else if (data.value.dis < 500) {
                return 0.02;
              } else if (data.value.dis < 700) {
                return 0.01;
              } else {
                return 0.005;
              }
            },
            opacity: 0.8,
            color: "#5DFBF9"
          }
        });

        layer.render();
      });
    }
  }
};
</script>
<style >
#trajectory {
  height: calc(100vh - 50px);
}
</style>